/* eslint-disable default-case */
import React from "react";
import "./index.css";

const EXP = {
    add:0,
    reduce :1,
    take :2,
    remove:3,
}

const CTRL = {
    blanking: 0,
    reverse: 1,
    percentage: 2,
}

const BTN = {
    number: 0,
    ctrl: 1,
    exp: 2,
    calc: 3,
}


export default class Calc extends React.Component {
    state = {
        number1:'0',
        exp:null, //"+" "-" "*" "/"
        number2:'0',
    }

    getCurrentNumber = () => {
        const {number1, number2, exp} =this.state;
        return exp === null ? number1 : number2;
    }
    //数字显示
    onNumberChange= value => {  
        const {exp} =this.state;
        const prevNumber = this.getCurrentNumber();
        let newNumber;
        
        if(/\./.test(prevNumber) && value==='.'){
            newNumber = prevNumber;
        } else if(prevNumber === '0' && value !== '.') {
            newNumber = value;
        } else {
            newNumber = this.state.number1+value;
            
        }

        exp === null
            ? this.setState({number1: newNumber})
            : this.setState({number2: newNumber});
            

    }
    //最上一行按钮
    onCtrlClick= ctrl => {
        const {number1,number2,exp} = this.state
        switch(ctrl){
            case CTRL.blanking: 
            if(exp=== null){
                this.setState({number1 :0})
            break;
            }else{
                this.setState({number2 :0})
                break;
            }
            case CTRL.reverse: 
            if(exp=== null){
                number1 = String(-Number(number1))
                this.setState({number1:number1});
                break;
            }else{
                number2 = String(-Number(number2))
                this.setState({number2:number2});
                break;
            }

            case CTRL.percentage: 
            number1 = String(Number(number1/100))
            this.setState({number1:number1});
            break;
        }

    }
    render() {
        const currentNumber = this.getCurrentNumber();
        return (<>
            <div className="calc">
                <div className="Calc-screen">{currentNumber}</div>
                <button onClick={() =>this.onCtrlClick(CTRL.blanking)} className="ctrl">C</button>
                <button onClick={() =>this.onCtrlClick(CTRL.reverse)} className="ctrl">+/-</button>
                <button onClick={() =>this.onCtrlClick(CTRL.percentage)} className="ctrl">%</button>
                <button className="exp">÷</button>
                <button onClick={() =>this.onNumberChange("7")}>7</button>
                <button onClick={() =>this.onNumberChange("8")}>8</button>
                <button onClick={() =>this.onNumberChange("9")}>9</button>
                <button className="exp">×</button>
                <button onClick={() =>this.onNumberChange("4")}>4</button>
                <button onClick={() =>this.onNumberChange("5")}>5</button>
                <button onClick={() =>this.onNumberChange("6")}>6</button>
                <button className="exp">-</button>
                <button onClick={() =>this.onNumberChange("1")}>1</button>
                <button onClick={() =>this.onNumberChange("2")}>2</button>
                <button onClick={() =>this.onNumberChange("3")}>3</button>
                <button onClick={()=>this.onExpClick(EXP.add)}className="exp">+</button>
                <button className="zero">0</button>
                <button onClick={() =>this.onNumberChange(".")}>.</button>
                <button className="exp">=</button>
            </div>

        </>)
    }
}

// [
//     {label: '+', type: BTN.exp, value: EXP.add}
// ]